<template>
  <el-main>
    <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>{{ breadcrumbNameP }}</el-breadcrumb-item>
    <el-breadcrumb-item>{{ breadcrumbName }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="formInline" class="el-form query-form el-form--label-right el-form--inline">
       <el-form-item label="运单号">
        <el-input size="small" v-model="formInline.transport_sn" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="所属DC">
        <el-select size="small" v-model="formInline.dept_id" placeholder="请选择" filterable>
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in deptData" :key="item.id" :value="item.id" :label="item.title">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="交货日期">
        <el-date-picker size="small" v-model="formInlineD.dataValue" type="daterange" align="right" unlink-panels
          range-separator="-" format="yyyy - MM - dd " value-format="yyyy-MM-dd" start-placeholder="开始日期"
          end-placeholder="结束日期" @change="changeDatePicker">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
      <el-button size="small" type="primary" @click="onSearch" icon="el-icon-search">搜 索</el-button>
      <el-button size="small" type="default" icon="el-icon-download">
          <a style="color: rgb(61, 31, 32);text-decoration: none;" @click="exportReport($event)"  href="">导出</a>
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="margin-top:30px" v-loading="loading">
      <el-table-column prop="transport_sn" label="运单号"></el-table-column>
      <el-table-column prop="dept_name" label="所属DC" ></el-table-column>
      <el-table-column prop="customer_num" label="客户数"></el-table-column>
      <el-table-column prop="transport_total_amt" label="价格"></el-table-column>
      <el-table-column prop="driver_name" label="司机"></el-table-column>
      <el-table-column prop="truck_card" label="车牌号"></el-table-column>
      <el-table-column prop="delivery_time" label="交货时间"></el-table-column>
      <el-table-column prop="meet_time" label="接单时间"></el-table-column>
      <el-table-column prop="stow_time" label="装货时间"></el-table-column>
      <el-table-column prop="un_stow_time" label="卸货时间"></el-table-column>
      <el-table-column prop="fulfill_time" label="完成时间"></el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" :current-page="formInline.page" :page-size="formInline.limit"
      :hide-on-single-page="true" layout="total, prev, pager, next" :total="total">
    </el-pagination>
  </el-main>
</template>
<script>
  import {
    mapState
  } from 'vuex'
  import {
  taskFactoryList,
  getAllDc
  } from '@/api.js'
  export default {
    name: "factoryTaskList",
    data() {
      return {
        tableData: [],
        deptData:[],
        truckData:[],
        formInline:{
          dept_id:'',
          transport_sn:'',
          start_dt:'',
          end_dt	:'',
          page:1,
          limit:10
        },
        TaskSnTask:'',
        formInlineD:{
           dataValue:[]
        },
         //分页
        total: 0,
        loading: true,
        breadcrumbName:'',
        breadcrumbPath:'',
        breadcrumbNameP:'',
      }
    },
    mounted() {
      this.breadcrumbName = this.$route.query.breadcrumbName
      this.breadcrumbPath = this.$route.query.breadcrumbPath
      this.breadcrumbNameP = this.$route.query.breadcrumbNameP
      this.getAgencyTaskList();
      this.getDeptList();
      // this.getTruckList()
    },
    methods: {
      getAgencyTaskList() {
        taskFactoryList(this.formInline).then(res => {
          this.loading = false
          if (res.ErrorCode == 0) {
            this.tableData = res.Data.list
            this.total = res.Data.total
          } else {
            this.$message.error(res.ErrorMsg)
          }
        })
      },
      getDeptList() {
        getAllDc({}).then(res => {
          if (res.ErrorCode == 0) {
            this.deptData = res.Data.list
          } else {
            this.$message.error(res.ErrorMsg)
          }
        })
      },
     getTruckList() {
      truckList({
       PageSize:-1,
      }).then(res => {
        if (res.code == 0) {
          this.truckData = res.data.list
        } else {
          this.$message.error(res.message)
        }
      })
    },
    exportReport(e) {
        e.target.href = this.baseUrl + 'report/export/plant_task_statement_export?transport_sn='+this.formInline.transport_sn+
        '&dept_id=' +this.formInline.dept_id+
        '&transport_sn=' +this.formInline.transport_sn+
        '&start_dt=' +this.formInline.start_dt+
        '&end_dt=' +this.formInline.end_dt+
        '&access_token=' +this.Token 
      },
    //表格查询
    onSearch () {
      this.formInline.page = 1;
      this.getAgencyTaskList();
    },
    handleCurrentChange(val) {
      this.loading = true
     this.formInline.page = val;
      this.getAgencyTaskList()
    },
    handlePass(index, row) {
       this.$router.push({
        path: '/factory/task_list_detail',
        query: {
          TaskSn: row.taskSn
          }
        })
    },
    changeDatePicker(val) {
      if (val) {
        this.formInline.start_dt = val[0]
        this.formInline.end_dt = val[1]
      } else {
        this.formInline.start_dt = ''
        this.formInline.end_dt = ''
      }
    },
    },
    computed: {
      ...mapState({
        baseUrl: state => state.baseUrl,
        Token: state => state.access_token,
      }),
    },
  }

</script>
<style scoped lang="scss">
  .search_box {
    width: 250px;
  }

  /deep/ .el-dialog__footer {
    text-align: center;
  }

</style>
